<template>
  <el-upload
    v-model:file-list="fileList"
    class="upload-demo"
    :on-preview="onPreview"
    :on-remove="onRemove"
    list-type="picture"
    multiple
  >
    <el-button type="primary">Click to upload</el-button>
    <template #tip>
      <div class="el-upload__tip">jpg/png files with a size less than 500kb</div>
    </template>
  </el-upload>
</template>

<script setup lang="ts">
import type { UploadProps, UploadUserFile } from 'element-plus'

const images = defineModel<FormGlobalFile[]>({
  default: () => []
})

const fileList = shallowRef<UploadUserFile[]>([])

watchEffect(() => {
  images.value = fileList.value.map((v) => ({
    name: v.name,
    response: v.response,
    size: v.size,
    type: v.raw?.type || ''
  }))
})

const onRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
}

const onPreview: UploadProps['onPreview'] = (file) => {
  console.log(file)
}
</script>

<style scoped lang="scss"></style>
